<template>
	<view class="container">
		<!-- title -->
		<view class="header-box">设备列表</view>
		<!-- 设备分类 -->
		<view class="navbar-box">
			<view :class="['navbar-item', activeNavbarIndex == index ? 'active-navbar' : '']" v-for="(item, index) in navbarList" :key="item.type" @click="changeNavbar(index)">
				<view class="navbar-item-name">{{ item.name }}</view>
				<view class="navbar-item-num">{{ item.num }}</view>
			</view>
		</view>
		<!-- 设备列表 -->
		<view class="device-box">
			<scroll-view :scroll-y="true" :lower-threshold="200" @scrolltolower="scrolltolower" class="scroll-Y">
				<view class="device-list" v-if="deviceList.length || loadingStatus == 'loading'">
					<view class="device-item" v-for="(item, index) in deviceList" :key="item.id">
						<view class="device-item-header" @click="goDetail(item)">
							<view class="header-left">设备id：{{ item.id }}</view>
							<view class="header-right">设备序列号：{{ item.serialNumber }}</view>
						</view>
						<view class="device-item-content" @click="goDetail(item)">
							<view class="device-name">
							{{ item.name }}
								<button v-if="activeNavbarIndex!=0" class="detail-btn" type="primary" @click.stop="showPort(item)">端口信息</button>
							</view>
							<view class="device-location">
								<image class="location-icon" src="../../static/images/device/location.png" mode=""></image>
								{{ item.location }}
							</view>
						</view>
						<!-- <view class="device-item-footer">
							<view class="footer-left">端口信息</view>
							<view class="footer-right">链路详情</view>
						</view> -->
					</view>
					<uni-load-more :status="loadingStatus"></uni-load-more>
				</view>
				<view v-else class="empty-box">
					<image class="empty-img" src="../../static/images/index/empty.png" mode="widthFix"></image>
					暂无数据
				</view>
			</scroll-view>
		</view>
		<!-- 底部tabbar -->
		<custom-tabbar :activeIndex="1"></custom-tabbar>
	</view>
</template>

<script setup>
import { reactive, toRefs, onMounted } from 'vue';
import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
import { getDeviceCount, listDeviceRack, listDeviceSwitch, listDeviceDistributionFrame, listDeviceImu, listDeviceAp } from '@/service/device.js';

// 懒加载图片
const getImageUrl = (name) => {
	return `../../static/images/index/${name}.png`;
};

const state = reactive({
	navbarList: [
		{
			name: '机柜',
			num: 0,
			type: 4,
			api: listDeviceRack
		},
		{
			name: '交换机',
			num: 0,
			type: 2,
			api: listDeviceSwitch
		},
		{
			name: '配线架',
			num: 0,
			type: 3,
			api: listDeviceDistributionFrame
		},
		{
			name: '管理单元',
			num: 0,
			type: 1,
			api: listDeviceImu
		},
		{
			name: 'AP',
			num: 0,
			type: 5,
			api: listDeviceAp
		}
	],
	activeNavbarIndex: 0,
	queryParams: {
		pageNum: 1,
		pageSize: 10,
		total: 0
	},
	deviceList: [],
	loadingStatus: 'more'
});
const { navbarList, activeNavbarIndex, deviceList, loadingStatus } = toRefs(state);

//切换navbar
const changeNavbar = (index) => {
	state.activeNavbarIndex = index;
	resetList();
};

//下拉刷新
onPullDownRefresh(() => {
	resetList();
});

onMounted(() => {
	getList();
	getDeviceStatistics();
});

//获取各类设备统计数量
const getDeviceStatistics = () => {
	getDeviceCount().then((res) => {
		let totalObj = {};
		res.rows.forEach((item) => {
			totalObj[item.tableName] = item;
		});
		state.navbarList.forEach((item) => {
			if (totalObj[item.name]) {
				item.num = totalObj[item.name].rowCount;
			}
		});
	});
};

//重置
const resetList = () => {
	state.queryParams = {
		pageNum: 1,
		pageSize: 10,
		total: 0
	};
	state.deviceList = [];
	getList();
};

// 滚动条触底事件
const scrolltolower = (e) => {
	if (state.loadingStatus == 'more') {
		state.queryParams.pageNum += 1;
		getList();
	}
};

//获取列表
const getList = () => {
	state.loadingStatus = 'loading';
	let Func = state.navbarList[state.activeNavbarIndex].api;
	Func(state.queryParams).then((res) => {
		res.rows.forEach((item) => {
			item.location = handleLocation(item);
		});
		state.deviceList = state.deviceList.concat(res.rows);
		state.queryParams.total = res.total;
		state.loadingStatus = res.total > state.deviceList.length ? 'more' : 'noMore';
		uni.stopPullDownRefresh();
	});
};

//处理位置信息
const handleLocation = (row) => {
	let location = row.locationList.map((item) => item.name);
	location.push(row.rackName);
	if (Array.isArray(row.unoIndexList) && row.unoIndexList.length) {
		if (row.unoIndexList.length > 1) {
			location.push(`${row.unoIndexList[0]}-${row.unoIndexList[row.unoIndexList.length - 1]}U`);
		} else {
			location.push(`${row.unoIndexList[0]}U`);
		}
	}
	return location.join(' / ');
};

//跳转详情
const goDetail = (row) => {
	if (row.deviceType == 4) {
		//机柜详情
		uni.navigateTo({
			url: '/pages/device/rack-detail?id=' + row.id
		});
	} else {
		uni.navigateTo({
			url: `/pages/device/detail?id=${row.id}&deviceType=${row.deviceType}`
		});
	}
};

//跳转端口详情
const showPort = (row) => {
	uni.navigateTo({
		url: `/pages/device/detail?id=${row.id}&deviceType=${row.deviceType}&activeNavbarIndex=1`
	});
}
</script>

<style lang="scss" scoped>
.container {
	box-sizing: border-box;
	width: 100vw;
	height: 100vh;
	padding: 48rpx 30rpx 0;
	position: relative;
	.header-box {
		width: 100%;
		height: 41rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #020217;
		line-height: 41rpx;
	}
	.navbar-box {
		box-sizing: border-box;
		width: 100%;
		height: 150rpx;
		padding: 26rpx 0 18rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.navbar-item {
			box-sizing: border-box;
			width: 127rpx;
			height: 100%;
			padding-top: 20rpx;
			background-color: #f5f7f9;
			.navbar-item-name {
				font-size: 23rpx;
				color: #767e94;
				line-height: 31rpx;
				text-align: center;
			}
			.navbar-item-num {
				font-size: 23rpx;
				color: #37373a;
				font-weight: bold;
				line-height: 36rpx;
				text-align: center;
			}
		}
		.active-navbar {
			background: #ffffff;
			box-shadow: 0rpx 4rpx 13rpx 0rpx rgba(41, 91, 245, 0.1);
			border: 1rpx solid #d8dadf;
			.navbar-item-name {
				color: #37373a;
				text-shadow: 0rpx 4rpx 13rpx rgba(41, 91, 245, 0.1);
			}
			.navbar-item-num {
				color: #295bf5;
				text-shadow: 0rpx 4rpx 13rpx rgba(41, 91, 245, 0.1);
			}
		}
	}
	.device-box {
		width: 100%;
		height: calc(100% - 191rpx);
		overflow: hidden;
		.scroll-Y {
			height: 100%;
		}
		.device-list {
			box-sizing: border-box;
			width: 100%;
			// height: 100%;
			padding: 0 0 190rpx;
			// overflow-y: auto;
			.device-item {
				box-sizing: border-box;
				width: 100%;
				// height: 240rpx;
				background: #f9fbfd;
				box-shadow: 0rpx 2rpx 4rpx 0rpx #dbdee6;
				border-radius: 8rpx;
				padding: 20rpx 23rpx 0;
				margin-bottom: 23rpx;
				.device-item-header {
					width: 100%;
					height: 25rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.header-left,
					.header-right {
						font-size: 19rpx;
						color: #7e8ca0;
						line-height: 25rpx;
					}
				}
				.device-item-content {
					box-sizing: border-box;
					width: 100%;
					height: 127rpx;
					padding: 10rpx 0 0;
					.device-name,
					.device-location {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.device-name {
						font-size: 30rpx;
						color: #262d37;
						font-weight: bold;
						line-height: 47rpx;
						position: relative;
						.detail-btn{
							padding: 0 10rpx;
							font-size: 24rpx;
							font-weight: normal;
							line-height: 40rpx;
							position: absolute;
							right: 0;
							bottom: 4rpx;
						}
					}
					.device-location {
						font-size: 23rpx;
						color: #7e8ca0;
						line-height: 30rpx;
						margin-top: 9rpx;
						display: flex;
						align-items: center;
						.location-icon {
							display: block;
							width: 11rpx;
							height: 23rpx;
							margin-right: 5rpx;
						}
					}
				}
				.device-item-footer {
					box-sizing: border-box;
					width: 100%;
					height: 68rpx;
					margin: 0 auto;
					border-top: 1rpx dashed #0c71e2;
					display: flex;
					.footer-left,
					.footer-right {
						width: 50%;
						height: 100%;
						font-size: 23rpx;
						color: #295bf5;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}
		.empty-box {
			box-sizing: border-box;
			width: 100%;
			height: calc(100% - 7.27vh);
			padding-bottom: 10vh;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 3.125vw;
			color: #808994;
			.empty-img {
				display: block;
				width: 17.875vw;
				margin-bottom: 2.7vh;
			}
		}
	}
}
</style>
